<script setup lang="ts">
import { ref, onMounted, onUpdated } from 'vue'
import { isLogin, logout, getUsers } from '../../util/SessionUtil'
import $ from 'jquery'
import 'bootstrap/dist/js/bootstrap'
import { db } from '../../db/db'

const judgeLogin = ref(false)
const users: any = ref({})
const pi:any = ref({})

onMounted(async () => {
    const okLoing = isLogin()
    judgeLogin.value = okLoing
    users.value = getUsers()
    const tempPlat = await db.platformInformation.where('platformId').equals('972529ff-3bc8-495d-8882-c155ba8e0b8c').toArray()
    pi.value = tempPlat[0]
})

onUpdated(() => {
    $('.dropdown-toggle').dropdown()
})

function toLogout() {
    logout()
    judgeLogin.value = false
    window.location.href = '/web/index'
}

const svg = ref(
    '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"' +
    ' y="0px" viewbox="0 0 1440 126" style="enable-background: new 0 0 1440 126" xml:space="preserve">' +
    ' <path class="bg-black" d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z" />' +
    ' </svg>'
)
</script>

<template>
    <nav class="topnav navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
        <div class="container-fluid">
            <RouterLink to="/web/index" class="navbar-brand">
                <font-awesome-icon icon="dove" class="mr-2" />校园 <strong>萌宠</strong> 救助
            </RouterLink>
            <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor02"
                aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse" id="navbarColor02" style="">
                <ul class="navbar-nav ml-auto d-flex align-items-center">
                    <li class="nav-item" v-if="!judgeLogin">
                        <RouterLink to="/web/login" class="nav-link">登录</RouterLink>
                    </li>
                    <li class="nav-item" v-if="!judgeLogin">
                        <RouterLink to="/web/register" class="nav-link">注册</RouterLink>
                    </li>
                    <li class="nav-item dropdown" v-if="judgeLogin">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <img class="rounded-circle shadow" :src="users.avatar" style="width: 35px;height: 35px;" />
                            {{ users.realName }}
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <RouterLink to="/web/personal" class="dropdown-item">个人中心</RouterLink>
                            <a class="dropdown-item" href="#" @click="toLogout">退出登录</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <RouterView />

    <div style="position:fixed; bottom:20px;left:20px;">
        <a href="https://yiyan.baidu.com/" target="_blank"><img class="rounded-circle shadow-lg"
                src="/img/coffee.png" width="70" data-toggle="tooltip" data-placement="top" title=""
                data-original-title="Buy me a coffee!"></a>
    </div>

    <div v-html="svg"></div>
    <footer class="bg-black pb-5">
        <div class="container">
            <div class="row">
                <div class="col-12 col-md mr-4">
                    <i class="fas fa-copyright text-white"></i>
                    <small class="d-block mt-3 text-muted">©
                        {{ new Date().getFullYear() }}
                        动物保护公益组织
                    </small>
                </div>
                <div class="col-6 col-md">
                    <h5 class="mb-4 text-white">组织</h5>
                    <ul class="list-unstyled text-small">
                        <li><a class="text-muted" href="http://www.cwca.org.cn/" target="_blank">中国野生动物保护协会</a></li>
                        <li><a class="text-muted" href="https://www.iucn.org/" target="_blank">世界自然保护联盟</a></li>
                        <li><a class="text-muted" href="https://www.ifaw.org/international"
                                target="_blank">国际爱护动物基金会</a></li>
                        <li><a class="text-muted" href="https://www.worldanimalprotection.org.cn/"
                                target="_blank">世界动物保护协会</a></li>
                    </ul>
                </div>
                <div class="col-6 col-md">
                    <h5 class="mb-4 text-white">资源</h5>
                    <ul class="list-unstyled text-small">
                        <li><a class="text-muted" href="http://www.poeoo.com/" target="_blank">中国宠物网</a></li>
                        <li><a class="text-muted" href="https://www.pethome.cn/" target="_blank">宠物之家</a></li>
                        <li><a class="text-muted" href="https://www.lovepet.cn/" target="_blank">爱宠网</a></li>
                        <li><a class="text-muted" href="http://imaging.chongaipet.com/" target="_blank">宠爱国际动物医院</a>
                        </li>
                    </ul>
                </div>

                <div class="col-6 col-md">
                    <h5 class="mb-4 text-white">联系我们</h5>
                    <ul class="list-unstyled text-small">
                        <li class="text-muted">联系人：{{ pi.responsiblePerson }}</li>
                        <li class="text-muted">联系电话：{{ pi.responsiblePersonPhoneNumber }}</li>
                        <li class="text-muted">地址：{{ pi.companyAddress }}</li>
                        <li class="text-muted">邮政编码：{{ pi.postalCode }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
</template>
